<template>
	<div :style="'left:' + x + '% ;top:' + y + '%;position:' + (x !== '' ? 'absolute' : y !== '' ? 'absolute' : '')" style="max-width: 240px">
		<div class="tips">
			<slot name="before" />
			<el-button :icon="imgUrl ? '' : icon" :style="`font-size:32px;border:0;transform: scale(${scale});`" circle @click="showContent">
				<img v-if="imgUrl !== ''" :src="imgUrl" style="width: 100%; height: 100%" />
			</el-button>
			<slot name="after" />
		</div>
		<div :style="`transform: translateX(${state.conPost});`" class="content">
			<el-table
				v-show="state.showCon"
				:data="state.tableData.slice((state.current - 1) * state.limit, state.current * state.limit)"
				border
				style="width: 100%; z-index: 999; margin-bottom: 0"
			>
				<el-table-column :label="state.tableData[0].Title" :width="tableWidth" prop="Content">
					<template #default="scope">
						<span v-html="scope.row.Content" />
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-show="state.showCon"
				:page-size="state.limit"
				:current-page="state.current"
				:total="state.tableData.length"
				layout="prev, pager, next"
				@current-change="handleCurrentChange"
			/>
		</div>
	</div>
</template>
<script setup lang="ts">
import { httpReqeustApi } from '/@/api/linxyun/base';
import {} from '@element-plus/icons-vue';
const props = withDefaults(
	defineProps<{
		// 要加载的提示数据源
		TipsCode: string;
		// x轴定位
		x: string;
		// y轴定位
		y: string;
		// 按钮图标
		icon: string;
		// 内容元素大小
		tableWidth: string;
		// 按钮大小
		scale: string;
		// 是否用图片作为按钮样式
		imgUrl: string;
		// 内容元素相对按钮位置 可选:center left right
		contentPost: string;
	}>(),
	{
		TipsCode: '',
		y: '',
		x: '',
		icon: 'QuestionFilled',
		tableWidth: '240',
		scale: '1',
		imgUrl: '',
		contentPost: 'center',
	}
);

const state = reactive<{
	showCon: boolean;
	tableData: { Title: string; Content: string }[];
	current: number;
	limit: number;
	tab: string;
	conPost: string;
}>({
	showCon: false,
	tableData: [{ Title: '', Content: '' }],
	current: 1,
	limit: 1,
	tab: '',
	conPost: '-43%',
});
watch(
	() => props.TipsCode,
	() => {
		state.tableData = [{ Title: '', Content: '' }];
		queryHelpTipsFn();
	}
);
switch (props.contentPost) {
	case 'center':
		state.conPost = '-43%';
		break;
	case 'left':
		state.conPost = '0';
		break;
	case 'right':
		state.conPost = '-80%';
		break;
	default:
		break;
}
console.log('7777777777777', props.imgUrl);
const showContent = () => {
	state.showCon = !state.showCon;
};
const handleCurrentChange = (val: number) => {
	state.current = val;
};
const queryHelpTipsFn = () => {
	console.log('queryHelpTipsFn', props.TipsCode);
	const params: any = {};
	params.TipsCode = props.TipsCode;
	httpReqeustApi()
		.Post('/eslithe/queryHelpTips.action', params)
		.then((res: any) => {
			const data = res.Records;
			if (data && data.length > 0) {
				state.tableData[0].Title = data[0].Title;
				state.tableData[0].Content = data[0].Content1;
				if (data[0].Content2 && data[0].Content2 !== '') {
					state.tableData.push({ Title: data[0].Title, Content: data[0].Content2 });
				}
				if (data[0].Content3 && data[0].Content3 !== '') {
					state.tableData.push({ Title: data[0].Title, Content: data[0].Content3 });
				}
			}
			state.tableData.forEach((item) => {
				item.Content = item.Content.replace(/\\n/g, '<br>');
			});
		});
};

queryHelpTipsFn();
</script>

<style scoped>
.tips {
	/* position: absolute; */
	z-index: 999;
	/* width: 40px; */
	height: auto;
	background-size: 100%;
	display: flex;
	align-items: center;
	/* background: red; */
}
:deep(.el-button i.el-icon) {
	font-size: 30px !important;
}
:deep(.el-button--medium.is-circle) {
	padding: 0;
}
.content {
	position: absolute;
	top: 40px;
	z-index: 999;
}
:deep(.el-button:focus, .el-button:hover) {
	color: #606266 !important;
	border-color: inherit !important;
	background-color: inherit !important;
}
:deep(.el-table th > .cell) {
	text-align: center;
}
</style>
